$(function () {
    // 先加载form内置对象
    var form = layui.form;
    var addIndex;
    var editIndex;
    renderCategory();
    /*  -----------------------添加分类------------------------------------ */
    // 添加类别事件
    $('.layui-card-header button').on('click', function () {
        // 调用layui弹出层的open核心方法
        addIndex = layer.open({
            type: 1,
            title: '添加文章分类',
            // 这里的content使用模板来进行添加表单
            content: $('#tpl-add').html(),
            area: ['500px', '250px']
        });
    });

    // 点击弹出层的确定按钮 完成添加  表单监听事件  因为渲染添加类别时候  渲染的表单分开了  所以要给表单设置一个id 方便找到
    // 必须使用事件委托方案注册submit事件
    // 必须给form表单添加一个id
    $('body').on('submit', '#add-form', function (e) {
        // 清除默认行为
        e.preventDefault();
        // 发送ajax请求  完成数据的添加
        $.ajax({
            url: '/my/article/addcates',
            type: 'POST',
            // 使用serialize方法  必须检查表单的name属性是否和请求的参数相同
            data: $(this).serialize(),
            success: function (backData) {
                // 弹出提示层
                layer.msg(backData.message)
                // 判断成功  执行代码
                if (backData.status == 0) {

                    // 请求成功后 在调用函数  重新渲染页面，完成新增
                    renderCategory();
                    // 关闭弹层
                    layer.close(addIndex);
                };
            }
        });
    })
    /*  -----------------------编辑分类------------------------------------ */
    // 处理和添加类似  cv大法
    // 事件委托  给编辑按钮添加点击事件 是给模板的编辑按钮添加类名
    $('body').on('click', '.edit', function () {
        // 获取三个自定义属性
        var id = $(this).attr('data-Id');
        var name = $(this).attr('data-name');
        var alias = $(this).attr('data-alias');
        // 调用layui弹出层的open核心方法
        editIndex = layer.open({
            type: 1,
            title: '编辑文章分类',
            // 这里的content使用模板来进行添加表单
            content: $('#tpl-edit').html(),
            area: ['500px', '250px'],
            // 弹出层弹出之后执行的函数
            success: function () {
                form.val('edit-form', {
                    id: id,
                    name: name,
                    alias: alias
                });
            }
        });
    })
    // 点击确定按钮  完成修改
    $('body').on('submit', '#edit-form', function (e) {
        e.preventDefault();
        var data = $(this).serializeArray();
        data[0].name = 'Id';
        console.log(data);
        // 发送ajax 完成修改
        $.ajax({
            url: '/my/article/updatecate',
            type: 'POST',
            data: data,
            success: function (backData) {
                layer.msg(backData.message);
                if (backData.status == 0) {
                    renderCategory();
                    layer.close(editIndex);
                }
            }
        });
    })

    /*  -----------------------删除分类------------------------------------ */
    // 委托事件
    $('body').on('click', '.remove', function () {
        var id = $(this).attr('data-id');
        layer.confirm('确定删除吗？你好狠！', { icon: 2, title: '提示' }, function (index) {
            // 发送ajax请求  根据id名删除数据
            $.ajax({
                url: '/my/article/deletecate/' + id,
                type: 'GET',
                data: id,
                success: function (backData) {
                    layer.msg(backData.message);
                    if (backData.status === 0) {
                        // 删除成功，重新渲染
                        renderCategory();
                    }
                }
            });
        });


    })

});
function renderCategory() {
    // 发送ajax请求  获取数据
    $.ajax({
        url: '/my/article/cates',
        type: 'GET',
        success: function (backData) {
            // 使用模板引擎  将返回的数据渲染到页面上
            var res = template('tpl-category', backData);
            $('tbody').html(res);
        }
    });
};